<template>
  <div class="page-content" v-if="total > pageSize">
      <Page 
      :current="pageNumber" 
      :total="total" 
      :page-size="pageSize" 
      show-total 
      show-elevator
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changePageSize"></Page>
  </div>
</template>

<script>
export default {
    props: {
        total: {
            type: Number,
            default: 0
        },
        pageSize: {
            type: Number,
            default: 10
        },
        pageNumber: {
            type: Number,
            default: 1
        }
    },
    data () {
        return {

        }
    },
    methods: {
        // 切换页码
        changePage (num) {
            // this.$store.dispatch('changePage', num)
            this.$emit('onChange', num)
        },
        // 修改每页显示条数
        changePageSize (num) {
            // this.$store.dispatch('changePageSize', num)
        }
    }
}
</script>

<style scoped>
    .page-content{
        margin: 16px;
        overflow: hidden;
    }
</style>